<template>
	<view class="container">
    <!-- 顶部搜索及定位 -->
    <LocationCalendar page="home" />
    <view class="content">
      <!-- 宫格导航 -->
      <Grid />
      <!-- 横向 tab -->
      <SwitchTab :arr="categoryArr" :p_top="0" @tapSwitch="tapSwitch"/>
      <view class="goods-list">
        <ProductItem v-for="item in goodsList" :key="item + '00'" :item="item"/>
      </view>
    </view>
		<TabBar :currentPage="0" />
	</view>
</template>

<script setup>
  import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import Grid from './components/Grid.vue';
	import TabBar from '@/components/TabBar.vue';
  import SwitchTab from '@/components/SwitchTab.vue';
  import ProductItem from '@/components/ProductItem.vue';
  import LocationCalendar from '@/components/LocationCalendar.vue';
	import { GetHomeGoodsListApi } from '@/service/index.js'
	import { categoryArr } from '@/utils/switchBar.js'
	import { useAddressStore, useMiddleWare, useCommStore } from '@/store/index.js'
  const popupRef = ref()
  const { safeArea } = uni.getSystemInfoSync()
	const goodsList = ref([])
	const sort = ref(0)
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const tapSwitch = (e) => {
		sort.value = e
		page.value = 1
		goodsList.value = []
		getGoodsList()
	}
	// 获取商品列表
	const getGoodsList = () => {
		const { lonlat } = useAddressStore()
		let params = {
			page: page.value,
			page_size: pageSize.value,
			search: "",
			longitude: lonlat.longitude,
			latitude: lonlat.latitude,
      // longitude: 116.41025,
      // latitude: 39.916397,
			order: sort.value //排序方式
		}
		GetHomeGoodsListApi(params).then(res => {
			goodsList.value.push(...res.data)
			total.value = res.total
		}).catch((err) => {
      if(err.statusCode == 500) {
        setTimeout(() => {
          getGoodsList()
        }, 2000)
      }
    })
	}
	// const categorySuc = () => {
	// 	getGoodsList()
	// }
	onLoad((e) => {
		const { SETTID } = useMiddleWare()
    const { SETCOMM } = useCommStore()
		const { tid } = e
    SETCOMM()
		if(tid) SETTID(tid)
		uni.hideTabBar().then(() => {
			getGoodsList()
		})
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getGoodsList()
	})
</script>

<style scoped lang="scss">
  .container {
    width: 100%;
		padding-bottom: 50px;
    .content {
      width: 100%;
      padding: 10px 0;
			.goods-list {
				padding: 10px 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
				// column-count: 2; /* 设置列数 */
				// column-gap: 10px; /* 列之间的间距 */
				// box-sizing: border-box; /* 确保内边距不会增加容器大小 */
			}
    }
  }
</style>
